<!DOCTYPE html>
<html>
<head>
  <title>client side</title>
  <link rel="stylesheet" href="/css/client.css"/>
  <link rel="stylesheet" href="/jqueryui/jquery-ui.css"/>

  <meta charset="utf-8">
</head>
<body>
<div id="begin_chat_prompt" style="display: none">
  <a id="begin_chat_button" href="javascript:;">
    <img class="begin-chat-prompt-img" src="http://comm100.lsu.pw/">
  </a>
</div><!--  style="display: none" -->
<div class="chat_panel" style="display: none">
  <div class="chat_panel_title_bar">
    <div class="chat_panel_title_link_status status_online" title="在线">
    </div>
    <a class="close-chat-panle-button" href="javascript:;">
      <i class="iconfont">&#xe609;</i>关闭
    </a>
    <span class="chat-panel-title">客服-jack</span>
    <span class="edit-info-button"><i class="iconfont">&#xe61e;</i></span>
    <span class="rate-button"><i class="iconfont">&#xe61d;</i></span>
  </div>
  <div class="chat_panel_message_board">
<!--
     <div class="system-message">
          <span class="system-message-text">客服小王加入聊天</span>
     </div>
    <div class="chat_message_in">
      <a class="file-download-button" href="http://49.lsu.pw/owncloud/index.php/s/unvPxSEG3pXOnZ2/download"><i class="iconfont">&#xe61c;
      <span class="file-message-download-tip">点击下载文件</span> </i></a>
    </div>
-->
 <!--    <div class="chat_message_in">
      <p>alfiejwfLfijewfLFj</p>
    </div>
    <div class="chat_message_out">
      <p>
        lfaiewjfw;fjewofiewjffffffffffffffffffffffffffffddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfffff</p>
    </div>
    <div class="chat_message_in">
      <p>alfiejwfLfijewfLFj</p>
    </div>
    <div class="chat_message_in">
      <p>alfiejwfLfijewfLFj</p>
    </div>
    <div class="chat_message_out">
      <p>
        lfaiewjfw;fjewofiewjffffffffffffffffffffffffffffddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfffff</p>
    </div> -->
  </div>
  <div class="text-send-board">
      <input type="text" class="chat_panel_send_board_input text-input" placeholder="输入信息"/>
      <button class="send-button">发送</button>
  <div class="function-button-board">
    <div class="function-button-container">
      <a href="javascript:;" class="function-button add-file-button"><i
          class="iconfont file-send">&#xe60b;</i>
      </a> 
    </div>
    <div class="function-button-container">
      <a href="javascript:;" class="function-button add-image-button"><i
          class="iconfont file-send">&#xe60a;</i>
      </a> 
    </div>
    <div class="function-button-container">
      <a href="javascript:;" class="function-button add-emoji-button"><i
          class="iconfont file-send">&#xe607;</i>
      </a> 
    </div>
    <div class="function-button-container">
      <a href="javascript:;" class="function-button mic-button"><i
          class="iconfont file-send">&#xe602;</i>
      </a>
    </div><!-- 
    <div class="chat_panel_send_board_button_container">
      <button class="chat_panel_send_board_button_function_addmore"><i
          class="iconfont chat_panel_send_board_icon">&#xe604</i></button>
    </div> -->
  </div>
</div>
<div class="img-viewer-layer" style="display: none;">
  <div class="img-viewer-contaner">
    <div class="img-viewer-close-button-container">
      <a href="javascript:;" class="img-viewer-close-button"><i class="iconfont">&#xe603;</i></a>
    </div>
    <img class="img-show" src="http://ww4.sinaimg.cn/mw690/006h4oCqjw1f3crcrv5rpj30jg0jgq4p.jpg">
  </div>
</div>

<div id="star-service-container" style="display: none">
  <div class="stars-container">
    <i class="star-item iconfont" order="0">&#xe61d;</i>
    <i class="star-item iconfont" order="1">&#xe61d;</i>
    <i class="star-item iconfont" order="2">&#xe61d;</i>
    <i class="star-item iconfont" order="3">&#xe61d;</i>
    <i class="star-item iconfont" order="4">&#xe61d;</i>
  </div>
  <div class="star-submit-button-container">
    <input type="button" class="star-submit-button" value="评分">
  </div>
</div>
<ul id="emoji-box" style="display: none"><!-- 
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/1.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/2.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/3.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/4.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/5.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/6.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/7.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/8.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/9.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/10.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/11.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/12.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/13.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/14.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/15.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/16.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/17.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/18.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/19.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/20.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/21.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/22.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/23.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/24.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/25.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/26.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/27.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/28.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/29.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/30.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/31.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/32.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/33.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/34.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/35.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/36.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/37.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/38.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/39.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/40.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/41.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/42.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/43.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/44.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/45.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/46.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/47.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/48.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/49.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/50.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/51.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/52.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/53.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/54.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/55.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/56.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/57.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/58.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/59.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/60.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/61.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/62.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/63.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/64.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/65.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/66.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/67.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/68.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/69.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/70.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/71.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/72.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/73.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/74.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/75.gif"></li> -->
</ul>
<div id="personal-info-edit-board" style="display: none">
  <div class="personal-input-container">
    <span class="personal-input-lable">姓名:</span>
    <input type="text" class="personal-name-input">
  </div>
  <div class="personal-input-container">
    <span class="personal-input-lable">邮箱:</span>
    <input type="text" class="personal-email-input">
  </div>
  <div class="personal-input-container">
    <span class="personal-input-lable">电话:</span>
    <input type="text" class="personal-phone-input">
  </div>
  <div class="personal-input-container">
    <span class="personal-input-lable">留言:</span>
    <textarea row="5" cols="22" class="personal-message-input"></textarea>
  </div>
  <div class="personal-input-container">
    <a class="personal-info-submit-button" href="javascript:;">确认</a>
  </div>
</div>
<audio class="on-message-audio" controls style="display: none;">
  <source src="/ringtone/message.mp3" type="audio/mpeg">
</audio>
<input id="img-input" type="file" accept="image/gif, image/png,image/jpg,image/jpeg" name="img" style="display: none"/>
<input id="file-input" type="file" name="file" style="display: none"/>
  <div id="logbox" style="position: fixed; right: 0; bottom: 0; width: 300px; height: 300px; overflow-y: scroll; display: none;"></div>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="/js/jquery-1.7.2.min.js"></script>
<!--<script src="/jqueryui/jquery-ui.js"></script>-->
<script src="/js/strophe.js"></script>
<script src="/js/strophe.roster.js"></script>
<script src="/js/strophe.register.js"></script>
<script src="/js/peer.js"></script>
<script src="/js/client2.js"></script>
</body>
</html>
